import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

import geoJson from "./data"
import './index.scss'
export default function Index() {
  const echartsRefMap = useRef(null);
  useEffect(() => {


    echarts.registerMap("world", geoJson);
    var geoCoordMap = {
      阿富汗: [67.709953, 33.93911],
      安哥拉: [17.873887, -11.202692],
      阿尔巴尼亚: [20.168331, 41.153332],
      阿联酋: [53.847818, 23.424076],
      阿根廷: [-63.61667199999999, -38.416097],
      亚美尼亚: [45.038189, 40.069099],
      法属南半球和南极领地: [69.348557, -49.280366],
      澳大利亚: [133.775136, -25.274398],
      奥地利: [14.550072, 47.516231],
      阿塞拜疆: [47.576927, 40.143105],
      布隆迪: [29.918886, -3.373056],
      比利时: [4.469936, 50.503887],
      贝宁: [2.315834, 9.30769],
      布基纳法索: [-1.561593, 12.238333],
      孟加拉国: [90.356331, 23.684994],
      保加利亚: [25.48583, 42.733883],
      巴哈马: [-77.39627999999999, 25.03428],
      波斯尼亚和黑塞哥维那: [17.679076, 43.915886],
      白俄罗斯: [27.953389, 53.709807],
      伯利兹: [-88.49765, 17.189877],
      百慕大: [-64.7505, 32.3078],
      玻利维亚: [-63.58865299999999, -16.290154],
      巴西: [-51.92528, -14.235004],
      文莱: [114.727669, 4.535277],
      不丹: [90.433601, 27.514162],
      博茨瓦纳: [24.684866, -22.328474],
      中非共和国: [20.939444, 6.611110999999999],
      加拿大: [-106.346771, 56.130366],
      瑞士: [8.227511999999999, 46.818188],
      智利: [-71.542969, -35.675147],
      中国: [104.195397, 35.86166],
      太仓: [104.195397, 37.85168],
      南通: [120.195397, 30.85168],
      象牙海岸: [-5.547079999999999, 7.539988999999999],
      喀麦隆: [12.354722, 7.369721999999999],
      刚果民主共和国: [21.758664, -4.038333],
      刚果共和国: [15.827659, -0.228021],
      哥伦比亚: [-74.297333, 4.570868],
      哥斯达黎加: [-83.753428, 9.748916999999999],
      古巴: [-77.781167, 21.521757],
      北塞浦路斯: [33.429859, 35.126413],
      塞浦路斯: [33.429859, 35.126413],
      捷克共和国: [15.472962, 49.81749199999999],
      德国: [10.451526, 51.165691],
      吉布提: [42.590275, 11.825138],
      丹麦: [9.501785, 56.26392],
      多明尼加共和国: [-70.162651, 18.735693],
      阿尔及利亚: [1.659626, 28.033886],
      厄瓜多尔: [-78.18340599999999, -1.831239],
      埃及: [30.802498, 26.820553],
      厄立特里亚: [39.782334, 15.179384],
      西班牙: [-3.74922, 40.46366700000001],
      爱沙尼亚: [25.013607, 58.595272],
      埃塞俄比亚: [40.489673, 9.145000000000001],
      芬兰: [25.748151, 61.92410999999999],
      斐: [178.065032, -17.713371],
      福克兰群岛: [-59.523613, -51.796253],
      法国: [2.213749, 46.227638],
      加蓬: [11.609444, -0.803689],
      英国: [-3.435973, 55.378051],
      格鲁吉亚: [-82.9000751, 32.1656221],
      加纳: [-1.023194, 7.946527],
      几内亚: [-9.696645, 9.945587],
      冈比亚: [-15.310139, 13.443182],
      几内亚比绍: [-15.180413, 11.803749],
      赤道几内亚: [10.267895, 1.650801],
      希腊: [21.824312, 39.074208],
      格陵兰: [-42.604303, 71.706936],
      危地马拉: [-90.23075899999999, 15.783471],
      法属圭亚那: [-53.125782, 3.933889],
      圭亚那: [-58.93018, 4.860416],
      洪都拉斯: [-86.241905, 15.199999],
      克罗地亚: [15.2, 45.1],
      海地: [-72.285215, 18.971187],
      匈牙利: [19.503304, 47.162494],
      印尼: [113.921327, -0.789275],
      印度: [78.96288, 20.593684],
      爱尔兰: [-8.24389, 53.41291],
      伊朗: [53.688046, 32.427908],
      伊拉克: [43.679291, 33.223191],
      冰岛: [-19.020835, 64.963051],
      以色列: [34.851612, 31.046051],
      意大利: [12.56738, 41.87194],
      牙买加: [-77.297508, 18.109581],
      约旦: [36.238414, 30.585164],
      日本: [138.252924, 36.204824],
      哈萨克斯坦: [66.923684, 48.019573],
      肯尼亚: [37.906193, -0.023559],
      吉尔吉斯斯坦: [74.766098, 41.20438],
      柬埔寨: [104.990963, 12.565679],
      韩国: [127.766922, 35.907757],
      科索沃: [20.902977, 42.6026359],
      科威特: [47.481766, 29.31166],
      老挝: [102.495496, 19.85627],
      黎巴嫩: [35.862285, 33.854721],
      利比里亚: [-9.429499000000002, 6.428055],
      利比亚: [17.228331, 26.3351],
      斯里兰卡: [80.77179699999999, 7.873053999999999],
      莱索托: [28.233608, -29.609988],
      立陶宛: [23.881275, 55.169438],
      卢森堡: [6.129582999999999, 49.815273],
      拉脱维亚: [24.603189, 56.879635],
      摩洛哥: [-7.092619999999999, 31.791702],
      摩尔多瓦: [28.369885, 47.411631],
      马达加斯加: [46.869107, -18.766947],
      墨西哥: [-102.552784, 23.634501],
      马其顿: [21.745275, 41.608635],
      马里: [-3.996166, 17.570692],
      缅甸: [95.956223, 21.913965],
      黑山: [19.37439, 42.708678],
      蒙古: [103.846656, 46.862496],
      莫桑比克: [35.529562, -18.665695],
      毛里塔尼亚: [-10.940835, 21.00789],
      马拉维: [34.301525, -13.254308],
      马来西亚: [101.975766, 4.210484],
      纳米比亚: [18.49041, -22.95764],
      新喀里多尼亚: [165.618042, -20.904305],
      尼日尔: [8.081666, 17.607789],
      尼日利亚: [8.675277, 9.081999],
      尼加拉瓜: [-85.207229, 12.865416],
      荷兰: [5.291265999999999, 52.132633],
      挪威: [8.468945999999999, 60.47202399999999],
      尼泊尔: [84.12400799999999, 28.394857],
      新西兰: [174.885971, -40.900557],
      阿曼: [55.923255, 21.512583],
      巴基斯坦: [69.34511599999999, 30.375321],
      巴拿马: [-80.782127, 8.537981],
      秘鲁: [-75.015152, -9.189967],
      菲律宾: [121.774017, 12.879721],
      巴布亚新几内亚: [143.95555, -6.314992999999999],
      波兰: [19.145136, 51.919438],
      波多黎各: [-66.590149, 18.220833],
      北朝鲜: [127.510093, 40.339852],
      葡萄牙: [-8.224454, 39.39987199999999],
      巴拉圭: [-58.443832, -23.442503],
      卡塔尔: [51.183884, 25.354826],
      罗马尼亚: [24.96676, 45.943161],
      俄罗斯: [105.318756, 61.52401],
      卢旺达: [29.873888, -1.940278],
      西撒哈拉: [-12.885834, 24.215527],
      沙特阿拉伯: [45.079162, 23.885942],
      苏丹: [30.217636, 12.862807],
      南苏丹: [31.3069788, 6.876991899999999],
      塞内加尔: [-14.452362, 14.497401],
      所罗门群岛: [160.156194, -9.64571],
      塞拉利昂: [-11.779889, 8.460555],
      萨尔瓦多: [-88.89653, 13.794185],
      索马里兰: [46.8252838, 9.411743399999999],
      索马里: [46.199616, 5.152149],
      塞尔维亚共和国: [21.005859, 44.016521],
      苏里南: [-56.027783, 3.919305],
      斯洛伐克: [19.699024, 48.669026],
      斯洛文尼亚: [14.995463, 46.151241],
      瑞典: [18.643501, 60.12816100000001],
      斯威士兰: [31.465866, -26.522503],
      叙利亚: [38.996815, 34.80207499999999],
      乍得: [18.732207, 15.454166],
      多哥: [0.824782, 8.619543],
      泰国: [100.992541, 15.870032],
      塔吉克斯坦: [71.276093, 38.861034],
      土库曼斯坦: [59.556278, 38.969719],
      东帝汶: [125.727539, -8.874217],
      特里尼达和多巴哥: [-61.222503, 10.691803],
      突尼斯: [9.537499, 33.886917],
      土耳其: [35.243322, 38.963745],
      坦桑尼亚联合共和国: [34.888822, -6.369028],
      乌干达: [32.290275, 1.373333],
      乌克兰: [31.16558, 48.379433],
      乌拉圭: [-55.765835, -32.522779],
      美国: [-95.712891, 37.09024],
      乌兹别克斯坦: [64.585262, 41.377491],
      委内瑞拉: [-66.58973, 6.42375],
      越南: [108.277199, 14.058324],
      瓦努阿图: [166.959158, -15.376706],
      西岸: [35.3027226, 31.9465703],
      也门: [48.516388, 15.552727],
      南非: [22.937506, -30.559482],
      赞比亚: [27.849332, -13.133897],
      津巴布韦: [29.154857, -19.015438],
    };
    var myChart = echarts.init(echartsRefMap.current);

    var data_tmp = [
      { name: "南通", value: 199 },
      { name: "太仓", value: 199 },
      // { name: '印度', value: 42 },
      // { name: '韩国', value: 102 },
      // { name: '日本', value: 81 }
    ];
    var max = 480,
      min = 9; // todo
    var maxSize4Pin = 100,
      minSize4Pin = 20;

    var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      return res;
    };
    var option = {
      backgroundColor: '#020933',
      // backgroundColor: {
      //   type: "linear",
      //   x: 0,
      //   y: 0,
      //   x2: 1,
      //   y2: 1,
      //   colorStops: [
      //     {
      //       offset: 0,
      //       color: "#0f378f", // 0% 处的颜色
      //     },
      //     {
      //       offset: 1,
      //       color: "#00091a", // 100% 处的颜色
      //     },
      //   ],
      //   globalCoord: false, // 缺省为 false
      // },
      title: {
        top: 10,
        text: "电站分布图",
        subtext: "",
        x: "center",
        textStyle: {
          color: "#ccc",
        },
      },

      tooltip: {
        trigger: "item",
        formatter: function (params) {
          if (typeof params.value[2] == "undefined") {
            return params.name + " : " + params.value;
          } else {
            return params.name + " : " + params.value[2];
          }
        },
      },
      legend: {
        orient: "vertical",
        y: "bottom",
        x: "right",
        data: ["流量"],
        textStyle: {
          color: "#fff",
        },
      },
      visualMap: {
        show: false,
        min: 0,
        max: 500,
        left: "left",
        top: "bottom",
        text: ["高", "低"], // 文本，默认为数值文本
        calculable: true,
        seriesIndex: [1],
        inRange: {},
      },
      geo: {
        map: "world",
        zoom: 1,
        show: true,
        roam: true,
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        itemStyle: {
          normal: {
            areaColor: "#3a7fd5",
            borderColor: "#0a53e9", //线
            shadowColor: "#092f8f", //外发光
            shadowBlur: 20,
          },
          emphasis: {
            areaColor: "#0a2dae", //悬浮区背景
          },
        },
      },
      series: [
        {
          symbolSize: 5,
          label: {
            normal: {
              formatter: "{b}",
              position: "right",
              show: false, //是否显示地名
            },
            emphasis: {
              show: true,
            },
          },
          itemStyle: {
            normal: {
              color: "#fff",
            },
          },
          name: "light",
          type: "scatter",
          coordinateSystem: "geo",
          data: convertData(data_tmp),
        },
        {
          type: "map",
          map: "china",
          geoIndex: 0,
          aspectScale: 0.75, //长宽比
          showLegendSymbol: false, // 存在legend时显示
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
              textStyle: {
                color: "#fff",
              },
            },
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#031525",
              borderColor: "#FFFFFF",
            },
            emphasis: {
              areaColor: "#2B91B7",
            },
          },
          animation: false,
          data: data_tmp,
        },
        {
          name: "Top 5",
          type: "scatter",
          coordinateSystem: "geo",
          symbol: "pin",
          symbolSize: [50, 50],
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 9,
              },
              formatter(value) {
                return value.data.value[2];
              },
            },
          },
          itemStyle: {
            normal: {
              color: "#dfae10", //标志颜色
            },
          },
          data: convertData(
            data_tmp
              .sort(function (a, b) {
                return b.value - a.value;
              })
              .slice(0, 11)
          ), // 流量最大的前
          showEffectOn: "render",
          rippleEffect: {
            brushType: "stroke",
          },
          hoverAnimation: true,
          zlevel: 1,
        },
      ],
    }
    myChart.setOption(option);
  }, []);
  return (
    <div ref={echartsRefMap} style={{ width: '100%', height: '100%' }}>

    </div>
  );
}
